<template>
  <div>
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <TreeTools :node-data="companyInfo" :is-company="true" />
      <hr>
      <!--  -->
      <el-tree
        :expand-on-click-node="false"
        :data="depts"
        :props="{label: 'name'}"
        default-expand-all
      >
        <!-- 通过作用域插槽进行树形图自定义 -->
        <template v-slot="scoped">
          <!-- scoped自定义名称,用来接收el-tree遍历出来的数据,其中包括node和data两个参数,data里面有当前节点的数据 -->
          <!-- @showAddDialog="showAddDialog"接收来自tree-tools的通知,接到通知就进行事件处理,切换isShowDialog -->
          <TreeTools
            :node-data="scoped.data"
            :is-company="false"
            @showAddDialog="showAddDialog"
            @showEditDialog="showEditDialog"
            @reloadPage="getDepts"
          />
        </template></el-tree>

    </el-card>
    <!-- 3.将弹出框在index上进行使用,将最新的isShowDialog的值(true,false)传给弹出框组件,让其显示 -->
    <!-- @reloadPage="getDepts" 重新获取数据
     @closeDialog="isShowDialog=false" 关闭弹窗
     :node-data="nodeData" 将数据传给弹出框,让它获取到数据发送新增请求
     ref='addDialog' 让父组件index可以获取到整个弹窗组件,进而可以调用它里面的函数方法(通过id获取部门详情的方法),调用方法后更新addDepts里的formdata,实现弹出框里数据的变更-->
    <addDepts
      ref="addDialog"
      :is-show-dialog="isShowDialog"
      :node-data="nodeData"
      @reloadPage="getDepts"
      @closeDialog="isShowDialog=false"
    />
  </div>
</template>

<script>
// 引入树形图
import TreeTools from '@/views/departments/components/tree-tools.vue'
// 引入接口函数
import { getDeptList } from '@/api/department'
// 引入弹出框组件
import addDepts from '@/views/departments/components/add-depts.vue'
export default {
  // 注册树形图
  components: {
    TreeTools,
    addDepts
  },
  data() {
    return {
      depts: [],
      // 顶部数据传给子组件进行渲染
      companyInfo: {
        name: '传智教育',
        manager: '负责人'
      },
      isShowDialog: false,
      nodeData: {} // 空数组,存放tree-tools传过来的数据
    }
  },
  created() {
    // 页面一开始就获取部门列表
    this.getDepts()
  },
  methods: {
    // 将获取部门列表的函数进行封装
    async getDepts() {
      const res = await getDeptList()
      // console.log(res)
      // this.depts = res.depts
      // 获取公司的一级部门,一级部门的pid是''
      this.depts = this.listToTreeData(res.depts, '')
    },
    // 递归进行部门列表渲染
    listToTreeData(list, id) {
      const res = []
      list.forEach(element => {
        if (element.pid === id) {
          element.children = this.listToTreeData(list, element.id)
          res.push(element)
        }
      })
      return res
    },
    // 新增弹出框处理函数
    showAddDialog(nodeData) {
      // 将来自tree-tools的数据更新到index中的nodeData,再让index传给add-depts--
      this.nodeData = nodeData
      this.isShowDialog = true
    },
    // 编辑弹出框处理函数
    showEditDialog(nodeData) {
      // console.log(nodeData)
      this.nodeData = nodeData
      // 获取整个弹出框组件,调用里面的获取部门详情方法,获取数据实现数据回填
      // getDeptsDetail方法需要id,tree-tools组件已经传过来了
      this.$refs.addDialog.getDeptsDetail(nodeData.id)
      this.isShowDialog = true
    }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px  ;
  font-size:20px;
}
</style>
